<template>
  <div class="search-section">
    <div class="search-box">
      <el-input
        v-model="input"
        placeholder="搜索任务名称、描述或负责人..."
        class="search-input"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <div class="filter-buttons">
      <el-button type="primary" :icon="Plus">新建任务</el-button>
      <el-button :icon="Refresh">刷新</el-button>
    </div>
  </div>

  <!-- 任务统计卡片 -->
  <div class="stats-section">
    <div class="stat-card">
      <div class="stat-icon total">
        <el-icon><Document /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-number">{{ tableData.length }}</div>
        <div class="stat-label">总任务数</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon in-progress">
        <el-icon><Clock /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-number">{{ getInProgressCount() }}</div>
        <div class="stat-label">进行中</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon completed">
        <el-icon><Check /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-number">{{ getCompletedCount() }}</div>
        <div class="stat-label">已完成</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon pending">
        <el-icon><Timer /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-number">{{ getPendingCount() }}</div>
        <div class="stat-label">待开始</div>
      </div>
    </div>
  </div>

  <!-- 任务表格 -->
  <div class="table-section">
    <el-table
      :data="tableData"
      style="width: 100%"
      class="task-table"
      stripe
      border
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column prop="优先级" label="优先级" width="100">
        <template #default="{ row }">
          <el-tag :type="getPriorityType(row.优先级)" size="small" class="priority-tag">
            {{ row.优先级 }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="名称" label="任务名称" width="200">
        <template #default="{ row }">
          <div class="task-name">{{ row.名称 }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="描述" label="描述" min-width="250">
        <template #default="{ row }">
          <div class="task-description">{{ row.描述 }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="状态" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.状态)" size="small" class="status-tag">
            {{ row.状态 }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="任务类型" label="任务类型" width="120">
        <template #default="{ row }">
          <el-tag type="info" size="small" class="type-tag">
            {{ row.任务类型 }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="创建时间" label="创建时间" width="160">
        <template #default="{ row }">
          <div class="time-text">{{ formatTime(row.创建时间) }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="完成时间" label="完成时间" width="160">
        <template #default="{ row }">
          <div class="time-text">{{ formatTime(row.完成时间) }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="负责人" label="负责人" width="100">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar size="small" class="user-avatar">{{ row.负责人.charAt(0) }}</el-avatar>
            <span class="user-name">{{ row.负责人 }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="参与人" label="参与人" width="150">
        <template #default="{ row }">
          <div class="participants">
            {{ row.参与人 }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" fixed="right">
        <template #default>
          <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
          <el-button type="danger" size="small" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  Search,
  Plus,
  Refresh,
  Document,
  Clock,
  Check,
  Timer,
  Edit,
  Delete,
} from '@element-plus/icons-vue'

const input = ref('')

// 生成假数据
const tableData = ref([
  {
    优先级: '高',
    名称: '用户管理系统开发',
    描述: '开发一个完整的用户管理系统，包含用户注册、登录、权限管理等功能',
    状态: '进行中',
    任务类型: '开发任务',
    创建时间: '2024-01-15 09:00:00',
    完成时间: '2024-02-15 18:00:00',
    负责人: '张三',
    参与人: '李四, 王五',
  },
  {
    优先级: '中',
    名称: '数据库优化',
    描述: '对现有数据库进行性能优化，提升查询速度',
    状态: '已完成',
    任务类型: '维护任务',
    创建时间: '2024-01-10 14:30:00',
    完成时间: '2024-01-20 16:00:00',
    负责人: '李四',
    参与人: '张三',
  },
  {
    优先级: '低',
    名称: '文档编写',
    描述: '编写项目技术文档和用户使用手册',
    状态: '待开始',
    任务类型: '文档任务',
    创建时间: '2024-01-25 10:00:00',
    完成时间: '2024-02-05 17:00:00',
    负责人: '王五',
    参与人: '赵六',
  },
  {
    优先级: '高',
    名称: 'Bug修复',
    描述: '修复用户反馈的登录功能异常问题',
    状态: '进行中',
    任务类型: '修复任务',
    创建时间: '2024-01-28 11:00:00',
    完成时间: '2024-01-30 15:00:00',
    负责人: '张三',
    参与人: '李四, 王五, 赵六',
  },
  {
    优先级: '中',
    名称: '界面设计优化',
    描述: '优化用户界面的视觉效果和用户体验',
    状态: '已完成',
    任务类型: '设计任务',
    创建时间: '2024-01-05 13:00:00',
    完成时间: '2024-01-18 12:00:00',
    负责人: '赵六',
    参与人: '王五',
  },
])

// 获取优先级对应的标签类型
const getPriorityType = (priority: string) => {
  switch (priority) {
    case '高':
      return 'danger'
    case '中':
      return 'warning'
    case '低':
      return 'info'
    default:
      return 'info'
  }
}

// 获取状态对应的标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case '进行中':
      return 'primary'
    case '已完成':
      return 'success'
    case '待开始':
      return 'info'
    default:
      return 'info'
  }
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return '-'
  return time.split(' ')[0] // 只显示日期部分
}

// 统计函数
const getInProgressCount = () => {
  return tableData.value.filter((item) => item.状态 === '进行中').length
}

const getCompletedCount = () => {
  return tableData.value.filter((item) => item.状态 === '已完成').length
}

const getPendingCount = () => {
  return tableData.value.filter((item) => item.状态 === '待开始').length
}
</script>

<style scoped lang="less">
.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .search-box {
    flex: 1;
    max-width: 400px;

    .search-input {
      :deep(.el-input__wrapper) {
        border-radius: 6px;
        box-shadow: 0 0 0 1px #dcdfe6 inset;

        &:hover {
          box-shadow: 0 0 0 1px #c0c4cc inset;
        }

        &.is-focus {
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }
    }
  }

  .filter-buttons {
    display: flex;
    gap: 12px;
  }
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      font-size: 20px;
      color: white;

      &.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      &.in-progress {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      &.completed {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.pending {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }

    .stat-content {
      .stat-number {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        line-height: 1;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 14px;
        color: #909399;
      }
    }
  }
}

.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .task-table {
    :deep(.el-table__header) {
      th {
        background: #f5f7fa !important;
        color: #606266 !important;
        font-weight: 600;
      }
    }

    :deep(.el-table__row) {
      &:hover {
        background-color: #f5f7fa !important;
      }
    }
  }

  .priority-tag {
    font-weight: 500;
  }

  .status-tag {
    font-weight: 500;
  }

  .type-tag {
    font-weight: 500;
  }

  .task-name {
    font-weight: 500;
    color: #303133;
  }

  .task-description {
    color: #606266;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .time-text {
    font-size: 12px;
    color: #909399;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .user-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-weight: 500;
    }

    .user-name {
      font-size: 14px;
      color: #303133;
    }
  }

  .participants {
    font-size: 12px;
    color: #606266;
    line-height: 1.4;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .my-task-container {
    padding: 16px;
  }

  .search-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;

    .search-box {
      max-width: none;
    }

    .filter-buttons {
      justify-content: center;
    }
  }

  .stats-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
}
</style>
